<template>
  <el-dialog
    :model-value="DialogDetails"
    width="55%"
    :before-close="handleClose"
    style="padding: 0 40px 40px 40px"
  >
    <h3>社群详情</h3>
    <el-divider />
    <div
      v-loading="loading"
      element-loading-text="Loading..."
      class="details-content"
    >
      <div class="details-left">
        <el-descriptions :column="1" size="default">
          <el-descriptions-item label="社群名称：">
            {{ descriptionsData.typeName }}
          </el-descriptions-item>
          <el-descriptions-item label="社群类型：">
            {{ descriptionsData.typeId }}
          </el-descriptions-item>
          <el-descriptions-item label="社群地点：">
            {{ descriptionsData.destName }}
          </el-descriptions-item>
          <el-descriptions-item label="关联总群：">
            {{ descriptionsData.parentId }}
          </el-descriptions-item>
          <el-descriptions-item label="社群公告：">
            <br />
            {{ descriptionsData.announcement }}
          </el-descriptions-item>
          <el-descriptions-item label="活动简介：">
            <br />
            {{ descriptionsData.activityIntroduce }}
          </el-descriptions-item>
          <el-descriptions-item label="社群介绍：">
            <br />
            {{ descriptionsData.introduce }}
          </el-descriptions-item>
          <el-descriptions-item label="创始人简介">
            <br />
            {{ descriptionsData.founderIntroduce }}
          </el-descriptions-item>
        </el-descriptions>
      </div>
      <div class="details-right">
        <el-descriptions :column="1" size="large">
          <el-descriptions-item label="联系方式：">
            {{ descriptionsData.contact }}
          </el-descriptions-item>
          <el-descriptions-item label="社群标签：">
            <el-tag
              size="small"
              v-for="(item, index) in descriptionsData.tags"
              :key="index"
              style="margin-right: 5px"
            >
              {{ item }}
            </el-tag>
          </el-descriptions-item>
          <el-descriptions-item label="社群封面：">
            <br />
            <el-avatar
              :size="70"
              :src="descriptionsData.coverUrl"
              style="margin: 10px 5px 0 0"
            />
          </el-descriptions-item>
          <el-descriptions-item label="群名片模板：">
            <span
              v-for="(item, index) in descriptionsData.cardTitleTemplate"
              :key="index"
            >
              {{ item + '，' }}
            </span>
          </el-descriptions-item>
          <el-descriptions-item label="加入资格：">
            {{ descriptionsData.requirement }}
          </el-descriptions-item>

          <el-descriptions-item label="社群图片：">
            <br />
            <el-image
              v-for="(item, index) in descriptionsData.imgUrlList"
              :key="index"
              style="width: 120px; height: 120px; margin: 10px 5px 0 0"
              :src="item"
              fit="fill"
            />
          </el-descriptions-item>
        </el-descriptions>
      </div>
    </div>

    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleCancel">关闭</el-button>
        <el-button type="primary" plain @click="refuse">拒绝</el-button>
        <el-button type="primary" @click="carry">通过</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script setup>
import { getAssociationDetails } from '@/api/PlatformReview/association';
import { onMounted, onUpdated, ref } from 'vue';
const descriptionsData = ref({});
const loading = ref(true);

const emit = defineEmits(['carry', 'cancel', 'refuse']);

const props = defineProps({
  DialogDetails: {
    type: Boolean,
  },
  DetailsId: {
    type: String,
  },
});
const DetailsHandle = async () => {
  loading.value = true;
  const res = await getAssociationDetails(props.DetailsId);
  if (res.data.code === 200) {
    descriptionsData.value = res.data.data;
    loading.value = false;
  }
};

const handleCancel = () => {
  emit('cancel');
};
const refuse = () => {
  emit('refuse');
};
const carry = () => {
  emit('carry');
};
const handleClose = () => {
  handleCancel();
};
onMounted(() => {});
onUpdated(() => {
  DetailsHandle();
});
</script>

<style lang="scss" scoped>
:deep(.el-descriptions__label) {
  color: #afb1b3;
}
.details-content {
  display: flex;
  justify-content: space-between;
}
.details-left {
  flex: 1;
  padding-right: 60px;
  border-right: 1px dashed #afb1b3;
}
.details-right {
  flex: 1;
  padding-left: 60px;
}
</style>
